import React, { useRef, useState } from 'react';
import { Button, message, Space,Select } from 'antd';
import { ModalForm, ProFormText,ProFormTextArea } from '@ant-design/pro-form';
import {useSelector,useDispatch,connect} from 'react-redux'
const {Option} = Select;


const Editor = ({ques,url}) => {
    const restFormRef = useRef();
    const [modalVisible, setModalVisible] = useState(false);

    const valueList = useSelector(state=> state.value.valueList);
    const userList = useSelector(state=> state.user.userList)
    const dispatch = useDispatch();
    


    const put = async (values,url) => {
        await fetch(url,{
            method:'put',
            headers:{
                'Content-Type':'application/json'
            },
            body:JSON.stringify(values)})
            .then(res=>res.json())
            .then(res=>{})
        await dispatch({type:'editor',content:['editor']})
        
    }


    return (
        <ModalForm title="修改表单" formRef={restFormRef} visible={modalVisible} trigger={
        <div className="btnlike"><Button type="primary" onClick={() => {
            setModalVisible(true);
        }} destroyOnClose={true} initialValues={valueList}>
            编辑
      </Button></div>} onVisibleChange={setModalVisible} submitter={{
        searchConfig: {
            resetText: '重置',
        },
        resetButtonProps: {
            onClick: () => {
                var _a;
                (_a = restFormRef.current) === null || _a === void 0 ? void 0 : _a.resetFields();
                //   setModalVisible(false);
            },
        },
    }} onFinish={async (values) => {
            if(JSON.stringify(values) == "{}"){
                message.error('修改失败！请输修改的数据');
                return false;
            }else{
                let obj = {old:valueList,new:values}
                put(obj,url);
                message.success('修改成功！');
                return true;
            }
            
        
        
    }}>
   {
       ques.map(item=>{
           let rea = item.name;
        if((item.name).search('ID')!=-1) {
            return(
                <div>
                </div>
               )}
          else if ((item.name).search('Con')!=-1 || (item.name).search('Talk')!=-1){
            return <ProFormTextArea
            name={item.name}
            label={item.label}
            placeholder={item.placeholder}
            preserve={false}
            value={valueList[rea]}
            // fieldProps={inputTextAreaProps}
          />}
        else{
            return <ProFormText width="md" name={item.name} label={item.label} 
            tooltip={item.tooltip} 
            value={valueList[rea]}
            preserve={false}/>
        }
        
    })
   }
  </ModalForm>
    )
}

export default connect()(Editor)
